<template>
	<view class="mobile-item-container gradient-background">
		<Navbar title="课程" bgColor="transparent" :h5Show="false"></Navbar>
		<view style="padding: 16px 0 10px;">
			<u-search :show-action="true" actionText="搜索" :animation="true" shape="square" height="40px"></u-search>
		</view>
		<u-list height="auto" style="margin-top: 10px;" key="activeKey" @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in list" :key="index">
				<u-row>
					<u-col span="10">
						<view style="display: flex; align-items: center;">
							<b style="padding-right: 10px;">{{`${index + 1}-${item.name}`}}</b>
							<u--text align="right" type="info" size="12" :text="`单词总数：${item.totalNum}`"></u--text>
						</view>
						<view style="display: flex; align-items: center;margin-top: 5px;">
							<view style="color: #9093b3;padding-right: 10px;font-size: 10px;">进度：</view>
							<u-line-progress :showText="false" :percentage="calculatePercentage(item.learned, item.totalNum)" >
							</u-line-progress>
						</view>
					</u-col>
					<u-col span="2">
						<u-button @click="toDetail(item)" throttleTime="1000" style="width: 35px;height: 35px;" shape="circle" type="primary" text="切换"></u-button>
					</u-col>
				</u-row>
				<u-line style="padding-top: 10px;padding-bottom: 10px;" color="#3f3f3f" dashed></u-line>
			</u-list-item>
		</u-list>
		<u-modal :show="show" @cancel="show = false" @confirm="confirm" ref="uModal" showCancelButton closeOnClickOverlay asyncClose>
			<view style="text-align: center;">
				<u--text text="请确认是否切换到此课程"></u--text>
				<b>《{{title}}》</b>
			</view>
		</u-modal>

	</view>
</template>

<script>
	import * as IndexApi from '@/api/index'
	import Navbar from '@/components/navbar/Navbar'

	export default {
		components: {
			Navbar,
		},
		data() {
			return {
				show: false,
				params: {
					pageNum: 0,
					pageSize: 15
				},
				title: "",
				toId: null,
				list: [],
				activeStyle: {
					color: '#303133',
					fontSize: '20px',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}
			}
		},
		created() {
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			// 加载通知公告数据
			loadData() {
				this.params.pageNum += 1;
				IndexApi.courseList(this.params).then(res => {
					this.list = this.list.concat(res.rows);
				})
			},
			// 滚动分页加载数据
			scrolltolower() {
				this.loadData();
			},
			toDetail(item) {
				this.title = item.name;
				this.toId = item.id;
				this.show = true;
			},
			confirm() {
				setTimeout(() => {
					IndexApi.insertCourseBinding(this.toId).then(res => {
						this.show = false;
						uni.reLaunch({
							url: "/pages/index/index"
						})
					})
				}, 500)
			},
			calculatePercentage(learned, totalNum) {
			  // 计算百分比
			  console.debug("========",learned, totalNum, Math.round(learned / totalNum * 100));
			  return Math.round(learned / totalNum * 100);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.notice-item-tips {
		border-radius: 8px;
		background-color: #f4f4f5;
		padding: 9px 16px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
</style>